<template>
  <section>
    <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
    <el-row>
      <el-col :span="8"
              class="top-box-main">
        <div>
          <div>
            <el-form :inline="true"
                     :model="formInline"
                     class="demo-form-inline">
              <el-form-item label="拓客明细统计"
                            class="date-box">
                <el-date-picker v-model="formInline.date"
                                @change="showDataList"
                                type="daterange"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <div class="data-box">
              <div class="item-box">
                <h1>{{totalForm.inviteCount}}</h1>
                <p>用户累计拓客数量</p>
              </div>
              <div class="item-box">
                <h1>{{totalForm.money/100}}</h1>
                <p>用户累计现金奖励</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <btns @exec="exec"></btns>
    <div>
      <div class="btns-box">
        <div>用户拓客明细</div>
        <!-- <el-button type="primary" @click="daochu">导出</el-button> -->
      </div>
    </div>
    <div class="data-container scroll-table">
      <!-- 按钮列表 -->
      <el-table :data="tableData"
                border
                style="width: 100%"
                @selection-change="tableSelectionChange">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="nickname"
                         label="用户昵称">
        </el-table-column>
        <el-table-column prop="phoneNum"
                         label="电话号码">
        </el-table-column>
        <el-table-column prop="num"
                         label="下级投递总数">
          <template slot-scope="scope">
            <div v-if="scope.row.num==null||scope.row.num==undefined">0</div>
            <div v-else>{{scope.row.num}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="rewardInit"
                         label="累计积分奖励">
        </el-table-column>
        <el-table-column prop="rewardMoney"
                         label="累计现金奖励">
          <template slot-scope="scope">
            <p>{{scope.row.rewardMoney/100}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="createTime"
                         label="生成时间">
        </el-table-column>
        <el-table-column prop="state"
                         label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.state==1">启用</div>
            <div v-if="scope.row.state==0">禁用</div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="135px">
          <template slot-scope="scope">
            <el-button @click="gototogetHouseMent(scope.row)">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="mgt-10 pd-0"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="searchForm.current"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="searchForm.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="searchForm.totalCount">
      </el-pagination>
    </div>
    <!--新增修改界面-->
    <el-dialog title="添加仓库"
               :visible.sync="AddFormVisible">
      <el-form :model="addForm"
               ref="addForm">
        <el-form-item label="所在区域"
                      :label-width="formLabelWidth"
                      prop="cid">
          <el-select v-model="addForm.cid"
                     @change="getHouseArr"
                     placeholder="请选择所在区域">
            <el-option label="成都市"
                       value="1"></el-option>
            <el-option label="德阳市"
                       value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="大区运营名称"
                      :label-width="formLabelWidth"
                      prop="name">
          <el-input v-model="addForm.name"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="详细地址"
                      :label-width="formLabelWidth"
                      prop="address">
          <el-input v-model="addForm.address"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理人姓名"
                      :label-width="formLabelWidth"
                      prop="nick">
          <el-input v-model="addForm.nick"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理人微信号"
                      :label-width="formLabelWidth"
                      prop="contectWX">
          <el-input v-model="addForm.contectWX"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"
                      :label-width="formLabelWidth"
                      prop="phone">
          <el-input v-model="addForm.phone"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所管仓库"
                      :label-width="formLabelWidth"
                      prop="account">
          <el-checkbox-group v-model="addForm.houseIds"
                             @change="getHouse"
                             size="small">

            <el-checkbox v-for="(item) in houseArr"
                         :key="item.houseId"
                         :label="item.houseId"
                         border>{{item.houseName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="AddFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="sendHouse('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>

import btns from '@/components/btns.vue'
import { format } from "../../utils/tool"
import ExportExcel from "../../utils/ExportExcel.js";
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  components: {
    btns,
    ExportExcel,
    breadcrumbs,
  },
  data () {
    return {
      totalForm: {},
      formInline: {
        date: [],
      },
      houseArr: [],
      formLabelWidth: "120px",
      AddFormVisible: false,
      addForm: {
        houseIds: []
      },
      yearData: "",
      topData: {},
      btnForm: {},
      searchForm: {
        name: ''
      },
      addORUpdateVisible: false,
      funTit: '',
      cityForm: {
        cityName: "",
        cityId: ''
      },
      rules: {
        "btnIcon": [],
        "btnName": [
          { required: true, message: '请输入城市名称', trigger: 'blur' }
        ],
        "btnCode": [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        "sort": [
          { required: true, message: '排序', trigger: 'blur' }
        ],
        "cid": [
          { required: true, message: '请选择所在区域', trigger: 'change' }
        ],
        "name": [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        "address": [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        "nick": [
          { required: true, message: '请输入管理员姓名', trigger: 'blur' }
        ],
        "contectWX": [
          { required: true, message: '请输入管理员微信', trigger: 'blur' }
        ],
        "phone": [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        "account": [
          { required: true, message: '请输入报销账户收款账号', trigger: 'blur' }
        ],
      },
      tableData: [],
      tableSelection: []
    }
  },
  created () {
    this.getOperateNum();
    this.getTableData(1, 10);
    this.showDataList();
  },
  methods: {

    showDataList () {
      console.log(this.formInline.date)
      if (this.formInline.date.length > 0) {
        this.$api.toker.getUserInviteTotal({
          beginTime: this.formInline.date[0],
          endTime: this.formInline.date[1]
        }).then(res => {
          if (res.code == 200) {
            this.totalForm = res.data;
            console.log(this.totalForm)
          }
        })
      } else {
        this.$api.toker.getUserInviteTotal().then(res => {
          if (res.code == 200) {
            this.totalForm = res.data;
          }
        })
      }
    },
    gototogetHouseMent (row) {
      console.log(row)
      this.$router.push({
        path: "/toker/tokerDetails",
        query: { userId: row.wxUserId }
      })
    },
    getHouseArr () {
      this.$api.operate.getNotCityHouseList({
        cityId: 1,
      }).then(res => {
        if (res.code == 200) {
          this.houseArr = res.data;
        }
      })
    },
    getHouse () {
      console.log(this.addForm.houseIds)
    },
    getOperateNum () {
      this.$api.operate.getAdminOperateCount().then(res => {
        if (res.code == 200) {
          this.topData = res.data;
        }
      })
    },
    sendHouse (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.operate.addOperate({
            address: this.addForm.address,
            cityId: this.addForm.cid,
            contacPhone: this.addForm.phone,
            contactsName: this.addForm.nick,
            contactsWxno: this.addForm.contectWX,
            opName: this.addForm.name,
            houseIds: this.addForm.houseIds.length > 0 ? this.addForm.houseIds.toString() : ''
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "添加仓库成功"
              })
              this.addForm = {};
              this.getTableData(this.searchForm.current, this.searchForm.size);
              this.getOperateNum();
              this.AddFormVisible = false;

            }
          })
        }
      })
    },
    addhouse () {
      this.AddFormVisible = true
    },
    handleSizeChange (v) {
      console.log(v)
      this.searchForm.size = v;
      this.getTableData(this.searchForm.current, v);
    },
    handleCurrentChange (v) {
      this.searchForm.current = v;
      this.getTableData(v, this.searchForm.size);
    },
    getTableData (curr, size, info, name) {
      this.$api.toker.getUserInviteList({
        current: curr,
        size: size,
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data;
          this.searchForm.totalCount = res.totalCount;
          this.searchForm.size = res.pageSize
          this.formInline.date = [];
        }
      })
    },
    chageYearData () {
      this.$api.recycleBin.getAdminBackStopCount({
        year: this.yearData
      }).then(res => {
        if (res.code == 200) {
          this.topData = res.data
          this.searchForm.totalCount = res.totalCount;
          this.searchForm.size = res.pageSize
        }
      })
    },
    getYearData () {
      this.$api.recycleBin.getAdminBackStopCount().then(res => {
        if (res.code == 200) {
          this.topData = res.data

        }
      })
    },
    handleReset () {
      this.$refs.searchForm.resetFields();
      this.search()
    },
    search () {
      this.getTableData(this.searchForm.current, this.searchForm.size);
    },
    btnlist () {
      //获取接口
      this.$api.city.getList({}).then(d => {
        if (d.code == 200) {
          this.tableData = d.data;
        } else {
          this.$message.error(d.msg);
        }
      }).catch((e) => {
        console.log(e);
      })
    },
    tableSelectionChange (val) {
      this.tableSelection = val;
    },
    exec (fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]()
      } else {
        this.$message.error('方法未定义');
      }
    },
    add () {
      console.log("新增")

      this.btnForm = {
        "btnIcon": "",
        "btnName": "",
        "btnCode": "",
        "sort": 0
      }
      this.addORUpdateVisible = true;
    },
    update () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      this.btnForm = this.tableSelection[0];
      this.addORUpdateVisible = true;
    },
    del () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }

    },
    export () {
      console.log("导出")
      this.$api.outorder
        .gettuokeOutOrderExcel({

        })
        .then((d) => {
          let filename = "用户拓客明细表.xlsx";
          ExportExcel(d, filename);
        })
        .catch((e) => {
          console.log(e);
        });

    },
    refresh () {
      this.btnlist();
    },
    enable () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      var demo = this.tableSelection[0];
      if (demo.status == 1) {
        this.$message.error('该数据已启用');
        return
      }
      this.$confirm('此操作将启用该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.system.btnupdateStatus({ btnId: demo.btnId, status: 1 }).then(d => {
          if (d.code == 200) {
            this.btnlist();
            this.$message.success('启用成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    },
    disable () {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      var demo = this.tableSelection[0];
      if (demo.status == 0) {
        this.$message.error('该数据已禁用');
        return
      }
      this.$confirm('此操作将禁用该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.system.btnupdateStatus({ btnId: demo.btnId, status: 0 }).then(d => {
          if (d.code == 200) {
            this.btnlist();
            this.$message.success('禁用成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    },
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.tableData.findIndex(c => c.btnCode == this.btnForm.btnCode) >= 0) {
            this.$message.error('code不能重复');
            return
          }
          if (this.funTit == 'add') {
            this.$api.system.btnadd(this.btnForm).then(d => {
              if (d.code == 200) {
                this.addORUpdateVisible = false;
                this.$refs.btnForm.resetFields();
                this.btnlist();
              } else {
                this.$message.error(d.msg);
              }
            }).catch((e) => {
              console.log(e);
            })
          } else {
            this.$api.system.btnupdate(this.btnForm).then(d => {
              if (d.code == 200) {
                this.addORUpdateVisible = false;
                this.$refs.btnForm.resetFields();
                this.btnlist();
              } else {
                this.$message.error(d.msg);
              }
            }).catch((e) => {
              console.log(e);
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}

</script>
<style lang="less" scoped>
.btns-box {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.date-box {
  margin-left: 40px;
}
.top-box-main {
  border: 1px gray solid;
  padding: 20px;
}
.item-box {
  text-align: center;
}
.data-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fontText {
  font-size: 20px;
}
.fontTop {
  font-size: 40px;
}
.top-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.top-item {
  border: 1px gray solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  padding: 20px;
  .top-icon {
    width: 50%;
    height: 150px;
    border: 1px red solid;
  }
  .right-item-box {
    text-align: center;
    margin-left: 20px;
  }
}
</style>